<template>
  <div>
    你好世界
    <p id="pp">{{msg}}</p>
    <button @click="msg ='早上好' ">点击修改</button>
  </div>
</template>

<script>
export default {
  name: 'VueDay5Demo',

  data() {
    return {
      msg:'hello'
      
    };
  },
  //data数据初始化之前 组件还没有数据
  beforeCreate() {
    console.log('beforeCreate',this.msg);
  },
  //data初始化数据完成后
  created() {
   console.log('created',this.msg);
  },
  //DOM渲染之前 还没有DOM
  beforeMount(){
    const p = document.querySelector('#pp')
    console.log('beforeMount',p);
  },
  //DOM渲染完成之后，可以操作DOM
  mounted() {
     const p = document.querySelector('#pp')
    console.log('beforeMount',p);
  },
  //运行阶段
  //数据更新，DOM更新前
  beforeUpdate() {
    const p = document.querySelector('#pp')
    console.log('beforeUpdata',p.innerHTML);
  },
  // 数据更新，DOM更新
  updated() {
    const p = document.querySelector('#pp')
    console.log('Updata',p.innerHTML)
  },
  //组件销毁前
  beforeDestroy() {
    console.log('beforeDestroy');

  },
  //组件销毁后
  destroyed() {
    console.log('destroyed');
  },

  methods: {
    
  },
};
</script>

<style lang="scss" scoped>

</style>